<template>
  <div class="listSearchWrap sysLogSearch">
    <a-row :gutter="[8, 16]">
      <a-col
        :xs="24"
        :sm="24"
        :md="24"
        :lg="16"
        :xl="12"
        :xxl="8">
        <a-range-picker
          @change="onRangeChange"
          :allow-clear="true"
          :value="defaultDateRange"
          :showTime="{ format: 'HH:mm' }"
          format="YYYY-MM-DD HH:mm"
          :disabled-date="disabledDate"
          style="width: 100%;" />
      </a-col>
      <a-col
        :xs="24"
        :sm="24"
        :md="14"
        :lg="16"
        :xl="6"
        :xxl="5">
        <div class="searchBtns">
          <a-button type="info" @click="handleSearch">
            {{ $t('inquiry') }}
          </a-button>
          <a-button @click="clearCondition">
            {{ $t('clear') }}
          </a-button>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import moment from 'moment'
export default {
  data () {
    return {
      queryParams: {
        startTime: null,
        endTime: null
      }
    }
  },
  computed: {
    // 日期选择的默认值
    defaultDateRange () {
      if (this.queryParams.startTime && this.queryParams.endTime) {
        return [moment(this.queryParams.startTime), moment(this.queryParams.endTime)]
      }
      return []
    }

  },
  methods: {
    disabledDate (current) {
      return current > moment()
    },
    onRangeChange (date, dateString) {
      // eslint-disable-next-line prefer-destructuring
      this.queryParams.startTime = dateString[0]
      // eslint-disable-next-line prefer-destructuring
      this.queryParams.endTime = dateString[1]
    },
    handleSearch () {
      this.$emit('clickbtn', { type: 'searchData', data: this.queryParams })
    },
    clearCondition () {
      this.queryParams = {
        startTime: null,
        endTime: null
      }
      this.handleSearch()
    }
  }
}
</script>
